<template>
  <div class="home">
    <div class="head">
      <img src="/img/logo.jpg" alt="" />
      <div class="head_1">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2" @click="goOrder()">我的订单</el-menu-item>
          <el-menu-item index="3" @click="goOut()">退出登录</el-menu-item>
        </el-menu>
      </div>
      <div class="head_2">
        <img src="/img/icon.jpg" alt="" />
        <p>18759587753</p>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="l1">
          <img
            src="/img/icon_alerty.jpg"
            alt=""
            style="width: 17px; height: 17px; margin-left: 10px"
          />
          <span>请确保您填写的信息完整正确，否则会影响您的正常出行。</span>
        </div>
        <div class="l2">
          <div class="l2_1" style="margin-left: 12px">
            <img src="/img/tagico.jpg" alt="" />
            <span style="color: #00a5f6; font-size: 16px; margin-left: 8px"
              >航班信息</span
            >
          </div>
          <div class="l2_2" style="margin-left: 12px; padding-top: 12px">
            <div>
              <p
                style="
                  color: #333;
                  font-size: 16px;
                  font-weight: bolder;
                  font-style: normal;
                "
              >
                {{ flightInfo.date }} {{ flightInfo.aplace }}-{{
                  flightInfo.bplace
                }}
              </p>
              <p
                style="
                  color: #777;
                  font-size: 12px;
                  font-style: normal;
                  padding-top: 5px;
                "
              >
                {{ flightInfo.aircompany }}航空公司 机型：{{
                  flightInfo.airtype
                }}
              </p>
            </div>
            <div>
              <p style="color: #333; font-size: 26px">
                <strong>{{ flightInfo.atime }}</strong>
              </p>
              <p style="color: #333; font-size: 13px">
                {{ flightInfo.aplace }}T1
              </p>
            </div>
            <div>
              <p style="color: #777; font-size: 12px">
                {{ flightInfo.elapsedTime }}
              </p>
              <p><img src="/img/fly_jt.jpg" alt="" /></p>
            </div>
            <div>
              <p style="color: #333; font-size: 26px">
                <strong>{{ flightInfo.btime }}</strong>
              </p>
              <p style="color: #333; font-size: 13px">
                {{ flightInfo.bplace }}T1
              </p>
            </div>
            <div style="display: flex; align-items: center">
              <img src="/img/icon_gq.jpg" alt="" />
              <span style="color: #2577e3; font-size: 12px; padding-left: 5px"
                >退改规定|行李额</span
              >
            </div>
          </div>
        </div>
        <div class="l3">
          <div class="l3_1" style="margin-left: 12px">
            <img src="/img/dd_tit_icon.jpg" alt="" />
            <span style="color: #00a5f6; font-size: 16px; margin-left: 8px"
              >乘客信息</span
            >
          </div>
          <div class="l3_con">
            <div class="l3_2" style="margin-left: 12px">
              <em>*</em>工作单位：
              <el-input
                v-model="t_unit"
                placeholder="请输入工作单位或职业"
                style="width: 292px"
              ></el-input>
            </div>
            <div class="l3_2" style="margin-left: 12px">
              <em>*</em>中文姓名：
              <el-input
                v-model="t_name"
                placeholder="确保与证件保持一致"
                style="width: 292px"
              ></el-input>
            </div>
            <div
              class="l3_2"
              style="margin-left: 12px; display: flex; align-items: center"
            >
              <div>
                <em>*</em>身份证号：
                <el-input
                  v-model="t_idCard"
                  placeholder="请输入证件号码"
                  style="width: 292px"
                ></el-input>
              </div>
              <div
                style="
                  width: 160px;
                  margin-left: 10px;
                  padding: 0 10px;
                  margin-left: 10px;
                  height: 30px;
                  line-height: 30px;
                  background: #fff5d1;
                  border: 1px solid #feb532;
                  font-size: 16px;
                  color: #000;
                "
              >
                <span>{{ message }}</span>
              </div>
            </div>
            <div
              class="l3_3"
              style="
                margin-left: 12px;
                display: flex;
                align-items: end;
                margin: 12px 0;
              "
            >
              <img
                src="/img/icon_alerty.jpg"
                alt=""
                style="width: 17px; height: 17px; margin: 0 5px"
              />
              <span style="color: #ff7426; font-size: 12px"
                >为顺利出行，请确保出行姓名与证件一致</span
              >
            </div>
            <div class="l3_4" style="margin-left: 12px">
              <em>*</em>机票类型：
              <el-radio-group v-model="airtype">
                <el-radio label="成人" style="padding-bottom: 3px"></el-radio>
              </el-radio-group>
            </div>
            <div class="l3_5" style="margin-left: 12px">
              <em>*</em>出生日期：
              <el-input
                v-model="birth"
                placeholder="yyyy-mm-dd"
                style="width: 292px"
              ></el-input>
            </div>
            <div class="l3_6" style="margin-left: 12px">
              <em>*</em>手机号码：
              <el-input
                v-model="t_tel"
                placeholder="请填写手机号，用于接收航班信息"
                style="width: 292px"
              ></el-input>
            </div>
            <div
              class="l3_7"
              style="
                margin-left: 12px;
                display: flex;
                align-items: end;
                margin: 12px 0;
              "
            >
              <img
                src="/img/icon_alerty.jpg"
                alt=""
                style="width: 17px; height: 17px; margin: 0 5px"
              />
              <span style="color: #ff7426; font-size: 12px"
                >请填写乘机人本人手机号码，以便航班变动时及时收取航空公司提示短信</span
              >
            </div>
          </div>
        </div>
        <div class="l4" style="text-align: left">
          <p
            style="
              font-weight: normal;
              font-size: 18px;
              color: #f60;
              margin: 10px 10px 0;
            "
          >
            温馨提示
          </p>
          <p style="font-size: 14px; color: #555; margin: 10px 10px 0">
            目前该舱位余位紧张，价格时有变动，请尽快支付。
          </p>
        </div>
        <div class="l5" style="text-align: left">
          <div style="margin: 10px 10rem 0">
            <input type="checkbox" />
            <span>我已经阅读并接受</span>
            <span style="color: #00a5f6">《预订须知》</span>
          </div>
          <p style="margin: 10px 10rem 0">
            <el-button type="warning" @click="setData()">提交订单并支付</el-button>
            <el-button type="info">返回上一步</el-button>
          </p>
        </div>
      </div>
      <div class="right">
        <div class="r1">
          <h4
            style="
              font-size: 20px;
              color: #fff;
              line-height: 22px;
              padding-bottom: 9px;
              border-bottom: 1px dashed #fff;
            "
          >
            结算清单
          </h4>
          <dl>
            <dd>
              机票票面价：<span>￥ {{ flightInfo.price }} 元</span>
            </dd>
            <dd>机场建设费：<span>￥ 50 元</span></dd>
            <dd>燃油附加税：<span>￥ 140 元</span></dd>
          </dl>
          <p>预付定金</p>
          <p>
            <del>￥ {{ 190 + parseInt(flightInfo.price) }} 元</del>
          </p>
          <p>
            <strong> ￥ {{ (190 + parseInt(flightInfo.price)) / 2 }} 元</strong>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "@/common/api/request.js";
export default {
  name: "Home2",
  components: {},
  data() {
    return {
      activeIndex: "1",
      flightInfo: this.$route.query.key || null,
      airtype: "成人",
      birth: "",
      t_unit: "",
      t_name: "",
      t_idCard: "",
      t_tel: "",
      message: "请正确填写身份证号码",
    };
  },
  watch: {
    // 身份证验证
    t_idCard: {
      handler: function (newValue, oldValue) {
        console.log(oldValue);
        let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (reg.test(newValue)) {
            this.message="身份证号码正确"
          console.log(newValue);
        } else {
            this.message="身份证号码不正确"
        }
      },
    },
  },
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    setData() {
      let [tel,name,idCard,unit,aplace,bplace,atime,btime,date,flight,elapsedTime,price] = [
        this.t_tel,
        this.t_name,
        this.t_idCard,
        this.t_unit,
        this.flightInfo.aplace,
        this.flightInfo.bplace,
        this.flightInfo.atime,
        this.flightInfo.btime,
        this.flightInfo.date,
        this.flightInfo.Id,
        this.flightInfo.elapsedTime,
        this.flightInfo.price,
      ];
      http
        .$axios({
          url: "/api/addTravelOrder",
          method: "post",
          data: {
            tel,name,idCard,unit,aplace,bplace,atime,btime,date,status,flight,elapsedTime,price,
          },
        })
        .then((res) => {
          console.log(res.success)
          //if (!res.success) return;
          //this.$router.push("/path");
        });
    },
    goOrder(){
      this.$router.push({
                name:'Order',
            });
    },
    goOut(){
      this.$router.push({
                name:'Login',
            });
    }
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 41.0625rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 4.375rem;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  .head_1 {
    margin-top: 0.625rem;
  }
  .head_2 {
    margin-top: 0.625rem;
    p {
      color: RGB(150, 150, 150);
    }
  }
}
.content {
  width: 100%;
  flex: 1;
  background-color: RGB(237, 241, 246);
  display: flex;
  flex-direction: row;
  .left {
    width: 75%;
    height: 100%;
    border-right: 1px gainsboro solid;
    .l1 {
      width: 83%;
      height: 2.875rem;
      margin-left: 160px;
      margin-top: 1.25rem;
      background-color: #fff;
      line-height: 2.875rem;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .l2 {
      width: 83%;
      height: 6.5625rem;
      margin-left: 160px;
      margin-top: 1.25rem;
      background-color: #fff;
      padding: 12px 0;
      .l2_1 {
        height: 1.5625rem;
        display: flex;
        align-items: center;
      }
      .l2_2 {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .l3 {
      width: 83%;
      height: 21.5625rem;
      margin-left: 10rem;
      margin-top: 1.25rem;
      background-color: #fff;
      padding: 12px 0;
      .l3_1 {
        height: 1.5625rem;
        display: flex;
        align-items: center;
      }
      .l3_con {
        width: 80%;
        margin-left: 8.75rem;
        margin-top: 15px;
        text-align: left;
        div {
          margin-top: 5px;
        }
        em {
          font-size: 12px;
          color: #ff8042;
          padding: 0 2px;
        }
        ::v-deep .el-input__inner {
          height: 30px;
        }
        ::v-deep .el-radio__input.is-checked .el-radio__inner {
          background: gray;
          border-color: gray;
        }
        ::v-deep .el-radio__label {
          color: gray;
        }
      }
    }
    .l4 {
      width: 83%;
      height: 5.125rem;
      margin-left: 160px;
      margin-top: 1.25rem;
      background-color: #fffef5;
      border: 1px solid #f4dabd;
    }
    .l5 {
      width: 83%;
      height: 5rem;
      margin-left: 160px;
      margin-top: 1.25rem;
    }
  }
  .right {
    width: 25%;
    height: 100%;
    .r1 {
      width: 13.75rem;
      height: 21.25rem;
      margin-left: 15px;
      margin-top: 1.25rem;
      background-color: RGB(0, 168, 246);
      padding-top: 5px;
      dl {
        border-bottom: 1px dashed #fff;
        padding: 10px 20px;
        text-align: left;
        dd {
          margin-top: 10px;
          color: #fff;
        }
      }
      p {
        padding-top: 10px;
        color: #fff;
        font-size: 25px;
      }
    }
  }
}
</style>
